<template>
    <div>
        <label for="r1">修改颜色</label><input type="checkbox" v-model="used" id="r1">
        <div :class="{'hello' : used}">
            <h1 @click="submitDiv">{{ msg }}</h1>
            <input v-model="msg" v-focus>
        </div>
        <br>
        <div v-show="open">菜鸟教程</div>
        <ol v-for="(site,index) in orderOptions" :key="index">
            <li>{{index+1}}</li>
            <li>
                {{site.name}}
            </li>
            <li>
                {{site.age}}
            </li>
        </ol>
        <span>计算年龄:</span>{{showEdit}}<br>
        <div>{{reverseMessage}}</div>
        <button @click="counter++" v-bind:class="classObject" v-bind:style="styleObject">点击</button>
        <br>

        <input type="checkbox" id="a1" value="name1" v-model="checkedNames"><label for="a1">name1</label>
        <input type="checkbox" id="a2" value="name2" v-model="checkedNames"><label for="a2">name2</label>
        <p>你选择得值{{checkedNames}}</p>
        <br>
        <button @click="submitAxios">axios请求</button>
        <p>{{httpResp}}</p>
        <br>
        <button @click="gotoNews">跳转到新闻页</button>
        <button @click="gotoDetail">跳转到详情页</button>
        <br>另一种写法<br>
        <router-link to="/news" tag="button">跳转到新闻页</router-link>
        <router-link to="/pro" tag="button">跳转到详情页</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      userId: 1,
      msg: '我是天',
      used: false,
      open: true,
      counter: 1,
      httpResp: '',
      orderOptions: [
        {'name': '张三', 'age': 12},
        {'name': '李四', 'age': 42},
        {'name': '王五', 'age': 31}
      ],
      styleObject: {
        width: '200px',
        fontSize: '20px'
      },
      checkedNames: []
    }
  },
  created () {
    this.details()
  },
  methods: {
    details () {
      let that = this
      that.msg = that.msg + '我是地'
    },
    submitDiv () {
      let that = this
      alert(that.msg)
    },
    gotoNews () {
      this.$router.push({path: '/news'})
    },
    gotoDetail () {
      this.$router.push({path: '/pro'})
    },
    submitAxios () {
      this.$axios.get('/hello/hi').then(res => {
        alert(res.data)
      }).catch(err => {
        this.$message(err)
      })
    }
  },
  mounted () {
    this.$axios({
      url: '/hello/hi',
      method: 'get',
      withCredentials: true
    }).then(res => (this.httpResp = res.data))
      .catch(function (error) { // 请求失败处理
        console.log(error)
      })
  },
  computed: {
    reverseMessage () {
      return this.msg.split('').reverse().join('')
    },
    showEdit () {
      let total = 0
      let that = this
      for (let i = 0; i < that.orderOptions.length; i++) {
        total += parseInt(that.orderOptions[i].age)
      }
      return total
    },
    classObject () {
      return {
        hello: this.open
      }
    }

  },
  watch: {
    counter (nval, oval) {
      alert(oval + '变为' + nval)
    }
  },
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .hello {
        background: #42b983;
    }

    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
